<template>
  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Documentation</a> |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button @click="increase">count is: {{ state.count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  props: ['title'],
  setup(props, context) {
    console.log(props, context, 'setup');
    // 基础数据类型
    const num = ref(18);
    const str = ref("18");
    const boolean = ref(true);
    const vUndefined = ref(undefined);
    // obj arr
    const state = ref({
      count: 0,
    });
    const arr = ref([1]);
    const state2 = reactive({
      count: 0
    })

    console.log(str, 'str')
    console.log(num.value); // 18
    console.log(boolean, "boolean");
    console.log(vUndefined, "vUndefined");
    console.log(arr, "arr");
    console.log(state, "obj");
    console.log(state2, "obj");

    // 赋值 n失去响应性
    const n = state.value.count;
    // 方法
    function increase() {
      ++state.value.count;
      console.log(n); // 0
    }
    // 暴露给模板和 API 钩子的其他选项
    return {
      num,
      state,
      increase,
    };
  },
  mounted() {
    console.log(this.num, "this.num");
  },
};
</script>

<style scoped>
a {
  color: #42b983;
}
</style>
